<template>
	<view :style="viewColor">
		<view class="navTabBox">
			<view class="longTab">
				<view class="tab-item" v-for="(item,index) in tabList" :key="index" :class="{'on':index == tabIndex}" @click="tap(index)"><text>{{item.title}}</text></view>
			</view>
		</view>
		<view class="body">
			<block v-if="list.length">
				<service v-if="tabIndex == 1" :list="list" :type="3"></service>
				<demand  v-else :list="list"></demand>
			</block>
			<emptyPage v-else title="暂无数据"></emptyPage>
		</view>
		<authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize>
	</view>
</template>

<script>
	let app = getApp();
	import {
		recommendCommunity
	} from '@/api/circle.js';
	import {
		getUserServiceList
	} from '@/api/api.js';
	import {
		mapGetters
	} from "vuex";
	import authorize from '@/components/Authorize';
	import demand from '@/components/demand';
	import service from '@/components/service';
	import emptyPage from '@/components/emptyPage.vue';
	import { configMap } from '@/utils';
	import { HTTP_REQUEST_URL } from '@/config/app';
	import { getUserInfo } from '@/api/user.js';
	export default {
		components: {
			authorize,
			demand,
			service,
			emptyPage
		},
		data() {
			return {
				domain: HTTP_REQUEST_URL,
				loading: false,
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false ,//是否隐藏授权
				page: 1,
				isLoading: true,
				list: [],
				tabIndex: 0,
				tabList:[
					{
						title:'需求'
					},
					{
						title:'商家'
					}
				],
			};
		},
		computed: configMap(['hide_mer_status'], mapGetters(['isLogin','viewColor','keyColor'])),
		onLoad(options) {
			this.tabIndex = parseInt(options.tab_index) || 0;
			if (this.isLogin) {
			} else {
                this.isAuto = true;
                this.isShowAuth = true
			}
			this.getRecommendDemand();
		},
		mounted: function() {
		},
		methods: {
			tap(index) {
				this.tabIndex = index
				this.isLoading = true;
				this.page = 1;
				this.list = [];
				this.getRecommendDemand();
			},
			// 推荐行业需求
			getRecommendDemand() {
				let that = this;
				if(!that.isLoading) return false;
				let userAddress = that.$Cache.get('userAddress', true);
				let data = {
					is_type: that.tabIndex ? 1 : 3,
					district: userAddress.district,
					page: that.page, 
					limit: 10,
				}
				if(that.tabIndex == 1) {
					// 同城服务商
					// 同城服务商
					let address = that.$Cache.get('userAddress', true)
					data.lat = address.lat || '';
					data.lng = address.lng || '';
					getUserServiceList(data).then(res=>{
						if(res.status == 200) {
							that.list = that.list.concat(res.data.list);
							that.page++;
							that.isLoading = res.data.list.length >= 10;
						}
					})
				} else {
					recommendCommunity(data).then(res=>{
						if(res.status == 200) {
							that.list = that.list.concat(res.data.list);
							that.page++;
							that.isLoading = res.data.list.length >= 10;
						}
					}).catch(err=>{
						console.log('getRecommendCustomerr', err);
					})
				}
			},
			/**
			 * 授权回调
			 */
			onLoadFun: function() {
				this.isShowAuth = false;
				return uni.switchTab({
					url: '/pages/user/index'
				});
			},
			// 授权关闭
			authColse: function(e) {
				this.isShowAuth = e
			},
		},
		onReachBottom() {
			this.getRecommendDemand();
		}
	}
</script>

<style scoped lang="scss">
.body {
	padding: 0 30rpx;
}
.navTabBox{
	background: #fff;
	height: 90rpx;
}
.longTab{
	display: flex;
	text-align: center;
	padding: 30rpx 0;
}
.tab-item{
	width: 50%;
	display: inline-block;
	line-height: 44rpx;
	position: relative;
	text{
		position: relative;
		display: inline-block;
		font-size: 32rpx;
		font-weight: 400;
		color: #1C211D;
	}
}
.tab-item.on{
	color: var(--view-theme);
	text{
		font-weight: 500;
	}
	&:before{
		content: "";
		display: inline-block;
		width: 192rpx;
		height: 22rpx;
		background-color: var(--view-theme);
		position: absolute;
		left: 25%;
		bottom: 0;
	}
}
</style>
